<template>
  <div class="cumtom">
    <div class="cumtom-list" v-if="value">
      <div class="list-name"><span class="online"></span>{{ value | fiterValue(options) }}</div>
      <div class="list-unit">@{{ value | getWeChatName(options) }}</div>
    </div>
    <div class="cumtom-list c_text3" v-else>{{placeholder}}</div>
    <el-select
      v-model="value"
      clearable
      @change="getValue"
      :style="{ width: inputWidth }"
      :placeholder="placeholder"
      size="small"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <div class="optionBig">
          <div class="name"><span class="off"></span>{{ item.label }}</div>
          <div class="unit wx">@{{ item.WeChatName }}</div>

        </div>
      </el-option>
    </el-select>
  </div>
</template>
<script>
import Online from "@/views/monitor/online/index.vue";

export default {
  name: "WeChat",
  components: {Online},
  props: {
    options: {
      type: Array,
      default: () => [],
    },
    inputWidth: {
      type: String,
      default: "100%",
    },
    placeholder:{
      type: String,
      default: "请选择",
    }
  },
  data() {
    return {
      value: null,
    };
  },
  filters: {
    fiterValue(val, list) {
      let name = "";
      list.forEach((item) => {
        if (item.value == val) {
          name = item.label;
        }
      });
      return name;
    },
    getWeChatName(val, list) {
      let name = "";
      list.forEach((item) => {
        if (item.value == val) {
          name = item.WeChatName;
        }
      });
      return name;
    },
  },
  methods: {
    getValue(e) {
      console.log("e的值", e);
      let obj = {};
      this.options.forEach((item) => {
        if (item.value == e) {
          obj = item;
        }
      });
      this.$emit("getValue", obj);
    },
  },
};
</script>

<style scoped lang="scss">
.cumtom {
  position: relative;
  width: 100%;
  z-index: 2;
  line-height: normal;
  background: #fff;

  .cumtom-list {
    width: 100%;
    position: absolute;
    z-index: -1;
    height: 32px;
    bottom: 0px;
    display: flex;
    padding: 0px 10px;
    box-sizing: border-box;
    line-height: 32px;
  }
}

.optionBig {
  display: flex;

  .unit {
    color: rgb(240, 139, 0);
    &.wx {
      color: #00c270;
    }
  }
}

.list-unit {
  color: rgb(240, 139, 0);
}

::v-deep .el-select {
  width: 100%;
}

::v-deep .el-select > .el-input {
  font-size: 0px;
}

::v-deep .el-input--small .el-input__inner {
  background: none !important;
}
.c_text3{
  color: #C0C4CC;
}
.off ,.online {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  position: relative;
  top: -2px;
}
.off {
  background: #8C8C8C;
}
.online {
  background: #00c270;
}
</style>
